<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        main {
            display: flex;
        }

        main .iconfont {
            margin-right: 10px;
            font-size: 20px;
        }

        main .ull {
            text-align: left;
            list-style: none;
            color: white;
            background-color: rgb(36, 35, 35);
            min-height: 900px;
        }

        main .ull li {
            padding-left: 20px;
            width: 200px;
            line-height: 50px;
            border-radius: 10px;
        }

        main .ull li.active {
            color: black;
            background-color: whitesmoke;
        }

        main .ull li.xiala {
            color: white;
            background-color: rgb(50, 160, 251);
        }

        main .right {
            position: relative;
            flex: 1;
            min-height: 1000px;
            background-color: rgb(232, 232, 232);
        }

        main .right .top {
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            background-color: rgb(255, 255, 255);
        }

        main .right .top .zuo {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        main .right .top .zuo input {
            padding: 0 10px;
            height: 25px;
            border-radius: 5px;
            outline: none;

        }

        main .right .top .zuo div {
            margin-right: 20px;
        }

        main .right .top .you div {
            margin-right: 20px;
        }

        main .right .top .you {

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        main .right .bottom {
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }

        main .right .bottom h3 {
            font-size: 25px;
        }

        main .right .bottom .right_you {
            font-size: 20px;
        }

        main .right .bottom .right_you span {
            color: rgb(60, 171, 245);
        }

        main .right .bottom .tus {
            background-color: rgb(255, 255, 255);
            border-radius: 5px;
            width: 48%;
            height: 400px;
            position: absolute;
            top: 80px;
        }

        main .right .zhong {
            box-sizing: border-box;
            flex-wrap: wrap;
            justify-content: space-around;
            display: flex;
            left: 50%;
            transform: translate(-50%);
            width: 90%;
            min-height: 700px;
            position: absolute;
            /* background-color: rgb(255, 255, 255); */
        }

        main .right .zhong div {
            background-color: rgb(255, 255, 255);
            width: 48%;
            min-width: 500px;
            height: 400px;
            margin-bottom: 5px;
            margin-top: 5px;
            color: rgb(206, 206, 206);
        }

        main .right .zhong .tus3 {
            background-color: gainsboro;
            align-items: center;
            display: flex;
            justify-content:space-around;
            flex-direction: column;
            min-width: 500px;
            height: 400px;
        }
        main .right .zhong .tus3 .toptop{
            height: 100px;
            width: 100%;
             margin-top: 0;
        }
        main .right .zhong .tus3 .toptop h4 {
            margin: 20px 10px;
            color: black;
           
        }

        main .right .zhong .tus3 .toptop .uul {
            box-sizing: border-box;
            /* margin: 20px; */
            font-weight: 700;
            list-style: none;
            color: black;
            display: flex;
            align-items: center;
            justify-content: space-around;

        }
        main .right .zhong .tus3 .toptop .uul li:first-child,main .right .zhong .tus3 .toptop .rul li:first-child{
            text-align: left;
        }
        main .right .zhong .tus3 .bombom{
            text-align: center;
           flex: 1;
           width: 100%;
           margin-bottom: 0; 
        }
        main .right .zhong .tus3 .bombom .rul{
            min-width: 500px;
            line-height: 60px;
            border-bottom: 1px solid gainsboro;
            list-style: none;
            color: black;
            display: flex;
            text-align: center;
            justify-content: space-around;
        }
        main .right .zhong .tus4 {
            background-color: gainsboro;
            align-items: center;
            display: flex;
            justify-content:space-around;
            flex-direction: column;
            min-width: 500px;
            height: 400px;
        }
        main .right .zhong .tus4 .toptop{
            height: 83px;
            width: 100%;
             margin-top: 0;
        }
        main .right .zhong .tus4 .toptop h4 {
            margin: 20px 10px;
            color: black;
        }
        main .right .zhong .tus4 .bombom2{
           text-align: center;
           flex: 1;
           width: 100%;
           margin-bottom: 0; 
        }
        main .right .zhong .tus4 .bombom2 .rul{
            box-sizing: border-box;
            padding:  0  30px;
            min-width: 500px;
            line-height: 60px;
            border-bottom: 1px solid gainsboro;
            list-style: none;
            color: black;
            display: flex;
            text-align: center;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <main>
        <ul class="ull">
            <li><span class="iconfont">&#xe657;</span>AdminLTeE 3</li>
            <li><span class="iconfont">&#xe657;</span>Alexander Pierce</li>
            <li class="xiala"><span class="iconfont">&#xe657;</span>Dashboard</li>
            <li><span class="iconfont">&#xe657;</span>Dashboard V1</li>
            <li><span class="iconfont">&#xe657;</span>Dashboard V2</li>
            <li class="active"><span class="iconfont">&#xe657;</span>Dashboard V3</li>
            <li><span class="iconfont">&#xe657;</span>widgets</li>
            <li><span class="iconfont">&#xe657;</span>charts</li>
            <li><span class="iconfont">&#xe657;</span>UIlements</li>
            <li><span class="iconfont">&#xe657;</span>Forms</li>
            <li><span class="iconfont">&#xe657;</span>Tables</li>
            <li><span class="iconfont">&#xe657;</span>Tables</li>
            <li>EXAMPLES</li>
            <li><span class="iconfont">&#xe657;</span>Calendar</li>
            <li><span class="iconfont">&#xe657;</span>Mailbox</li>
            <li><span class="iconfont">&#xe657;</span>Pages</li>
            <li><span class="iconfont">&#xe657;</span>Extras</li>

        </ul>
        <div class="right">
            <div class="top">
                <div class="zuo">
                    <div><span class="iconfont">&#xe657;</span></div>
                    <div>Home</div>
                    <div>Contact</div>
                    <input type="text" placeholder="Search">
                </div>
                <div class="you">
                    <div><span class="iconfont">&#xe657;</span></div>
                    <div><span class="iconfont">&#xe657;</span></div>
                    <div><span class="iconfont">&#xe657;</span></div>
                </div>
            </div>
            <div class="bottom">
                <h3>Dashboard v3</h3>
                <div class="right_you"><span>Home</span> / Sashboard v3</div>
            </div>
            <div class="zhong">
                <div class="tus1"></div>
                <div class="tus2"></div>
                <div class="tus3">
                    <div class="toptop">
                        <h4>Products</h4>
                        <ul class="uul">
                            <li>Product</li>
                            <li>Price</li>
                            <li>Sales</li>
                            <li>More</li>
                        </ul>
                    </div>
                    <div class="bombom">
                    </div>
                </div>
                <div class="tus4">
                    <div class="toptop">
                        <h4>Online Store Overview</h4>
                    </div>
                    <div class="bombom2">
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
<script src="./promise-ajax.js"></script>
<script src="./mock.js"></script>
<script src="./mock-data.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script>
    let tuss1 = document.querySelector('.tus1')
    console.log(tuss1);
    var a = echarts.init(tuss1);
    // console.log(a);
    a.setOption({
        title: { //图表的标题
            text: 'Online Store Visitors',
            left: 10,
            top: 5,
        },
        legend: { //图例
            bottom: 3,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置
            type:"value",
            max:200,
            min:0,
            interval:20,
            // splitLine: {
            //     show: true,
            //     lineStyle: {//背景线条=====================
            //         color: 'gray',
            //         opacity: 0.23,
            //     }
            // }
        },
        series: [ //数据系列
            {
                name: 'THis Week',
                type: 'line',//'line' , 'bar' , 'pie'
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        // borderWidth: 2, //圆点的边框宽度
                        // borderColor: 'white', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        // shadowBlur: 5,

                    }
                },
                data: [100, 120, 170, 165, 180, 178, 160],
            },
            {
                name: 'Last week',
                type: 'line',//'line' , 'bar' , 'pie'
                symbolSize: 5, //圆点大小
                // symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                splitLine: {
                    show: true,
                    lineStyle: {//背景线条=====================
                        color: 'gray',
                        opacity: 0.23,
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        // borderWidth: 2, //圆点的边框宽度
                        // borderColor: 'white', //圆点的边框颜色
                        // lineStyle: { width: 2 }, //折现的宽度
                        // shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                },
                data: [60, 80, 70, 65, 80, 78, 60],

            }

        ]
    });
</script>
<script>
    let tuss2 = document.querySelector('.tus2')
    var b = echarts.init(tuss2);
    // console.log(b);
    b.setOption({
        title: { //图表的标题
            text: 'Sales',
            left: 10,
            top: 5,
        },
        legend: { //图例
            bottom: 3,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
            data: ['$0', '$1k', '$2k', '$3k'],
            splitLine: {
                show: true,
                lineStyle: {//背景线条=====================
                    color: 'gray',
                    opacity: 0.23,
                }
            }
        },
        series: [ //数据系列
            {
                name: 'This year',
                barWidth: 20, //柱子的宽度
                color: 'blue',
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    // color: 'blue',
                },
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [1, 2, 3, 2.5, 2.7, 2.5, 3]
            },
            {
                name: 'Last year',
                color: 'rgb(206, 206, 206)',
                barWidth: 20, //柱子的宽度
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    // color: 'blue',
                },
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [0.8, 1.8, 2.8, 2, 2.7, 1.5, 2]

            }

        ]

    })
</script>
<script>
    let bomboms = document.querySelector('.bombom')
    // console.log(bomboms);
    render(res.list)
    function render(res){
        // console.log(res);
        var str = res.map((item, index) => {
            return `
            <ul class= "rul">
                <li><span class="iconfont">&#xe649;</span>${item.name}</li>
                <li>$ ${item.money} USD</li>
                <li>${item.lilv} Sold</li>
                <li><span class="iconfont">&#xe627;</span></li>
            </ul>
            `
        }).join('')
        bomboms.innerHTML = str
    }
</script>
<script>
    let bombom2s = document.querySelector('.bombom2')
    console.log(bombom2s);
    render(ress.list)
    function render(ress){
        // console.log(ress);
        var str = ress.map((item, index) => {
            return `
            <ul class= "rul">
                <li><span class="iconfont">&#xe627;</span></li>
                <li>${item.lilv} Sold</li>
            </ul>
            `
        }).join('')
        bombom2s.innerHTML = str
    }
</script>